$grid-prefix: $css-prefix;

.#{$grid-prefix}mask-box{
  overflow-x: hidden;
  overflow-y: auto;
  display: inline-block;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  .#{$grid-prefix}mask{
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(55,55,55,.6);
    z-index:$zindex-loading-bar;
  }
  .#{$grid-prefix}confirm-content{
    background-color: white;
    top:px-or-rem(50);
    position: relative;
    // transform: translateY(-50%);
    border-radius:px-or-rem(5);
    box-shadow: 0 px-or-rem(5) px-or-rem(15) rgba(0,0,0,.5); 
    z-index:$zindex-spin-fullscreen;
    margin: 0 auto;
    .#{$grid-prefix}head{
      padding: px-or-rem(15);
      border-bottom:1px solid $border-color;
      position: relative;
      .#{$grid-prefix}head-title{
        strong{
          font-size: px-or-rem(14);
        }
        .ion-ios-close-empty{
          font-size: px-or-rem(21);
          color: darken(#fff, 40%);
          position: absolute;
          right: px-or-rem(7);
          top: px-or-rem(2);
          cursor: pointer;
          &:hover{
            color: #000;
          }
        }
      }
    }
    .#{$grid-prefix}confirm-body{
      padding: px-or-rem(15);
      font-size: px-or-rem(12);
      border-bottom:1px solid $border-color;
    }
    .#{$grid-prefix}confirm-footer{
      padding: px-or-rem(15);
      font-size: px-or-rem(12);
    }
  }
  .#{$grid-prefix}confirm-center{
    display: table;
    width:  px-or-rem(520);
    min-height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}
